<template>
     <!-- <a-config-provider > -->
        <div class='mainAll full-screen' id="mainAllS" :style="viewHeight">
            <div class="header">
                <div class="header-div one">
                    <a-button @click="toMain" style="background:#00a6eb;color:#fff;opacity:0.8;border:none">进入平台</a-button>
                </div>
                <div class="header-div two">
                    <font class="header-font">{{titles}}</font>
                </div>
                <!-- 时间 -->
                <div class="header-div three">
                    <font class="header-time">{{dateFormat(date)}}</font>
                </div>
            </div>
            <div class="body-graph">
                <!-- 左侧图 -->
                <div class="left">
                    <!-- 左1 -->
                    <div>
                        <a-button class="button-screen"><span class="button-font">当前泊位统计</span></a-button>
                    </div>
                    <div id="truck" class="image-graph"></div>
                    <!-- 左2 -->
                    <div>
                        <a-button class="button-screen"><span class="button-font">支付方式统计</span></a-button>
                    </div>
                    <div id="pay" class="image-graph"></div>
                    <!-- 左3 -->
                    <div>
                        <a-button class="button-screen"><span class="button-font">设备在线统计</span></a-button>
                    </div>
                    <div id="online" class="image-graph"></div>
                     <!-- 左4 -->
                    <div>
                        <a-button class="button-screen" ><span class="button-font">停车时长统计</span></a-button>
                    </div>
                    <div id="time" class="image-graph" style="height:170px !important"></div>
                </div>
                <!-- 中间图 -->
                <div class="center">
                    <!-- 中1 -->
                    <div>
                        <a-button class="button-screen"><span class="button-font">当前收入统计</span></a-button>
                    </div>
                    <div id="money" class="image-graph">
                        <!-- <div class="money-tab">
                           <PRE class="tab-pre">{{all}}</PRE>
                           <PRE> 总收益/订单总数  </PRE>
                        </div>
                        <div  class="money-tab">
                            <PRE class="tab-pre">{{day}}</PRE>
                            <PRE>今日收益/今日订单数</PRE>
                        </div>
                        <div  class="money-tab">
                            <PRE class="tab-pre">{{yesterday}}</PRE>
                            <PRE>昨日收益/昨日订单数</PRE>
                        </div> -->
                         <div class="money-tab">
                           <PRE class="tab-pre">{{all}}</PRE>
                           <PRE> 订单总数  </PRE>
                        </div>
                        <div  class="money-tab">
                            <PRE class="tab-pre">{{day}}</PRE>
                            <PRE>今日订单数</PRE>
                        </div>
                        <div  class="money-tab">
                            <PRE class="tab-pre">{{yesterday}}</PRE>
                            <PRE>昨日订单数</PRE>
                        </div>
                    </div>
                      <!-- 中2 -->
                    <div id="Crowded" class="image-graph" ></div>
                      <!-- 中3 -->
                    <div>
                        <a-button class="button-screen"><span class="button-font">7日内订单统计</span></a-button>
                    </div>
                    <div class="image-graph" id="week-day">
                        <div id="center-1" class="canter-day" style="color:#07bef0">
                               {{weekOrder[0].days}}<div class="day-div">{{weekOrder[0].count}}笔</div>
                        </div>
                        <div id="center-2" class="canter-day" style="color:#dbcc46">
                               {{weekOrder[1].days}}<div class="day-div">{{weekOrder[1].count}}笔</div>
                        </div>
                        <div id="center-3" class="canter-day" style="color:#ad56ff">
                               {{weekOrder[2].days}}<div class="day-div">{{weekOrder[2].count}}笔</div>
                        </div>
                        <div id="center-4" class="canter-day" style="color:#f47104">
                              {{weekOrder[3].days}}<div class="day-div">{{weekOrder[3].count}}笔</div>
                        </div>
                        <div id="center-5" class="canter-day" style="color:#2e57f8">
                               {{weekOrder[4].days}}<div class="day-div">{{weekOrder[4].count}}笔</div>
                        </div>
                        <div id="center-6" class="canter-day"  style="color:#0de178">
                               {{weekOrder[5].days}}<div class="day-div">{{weekOrder[5].count}}笔</div>
                        </div>
                        <div id="center-7" class="canter-day"  style="color:#fc6561">
                               {{weekOrder[6].days}}<div class="day-div">{{weekOrder[6].count}}笔</div>
                        </div>

                        <!-- <div id="all" class="week-sta"></div>
                        <div id="in" class="week-sta"></div>
                        <div id="out" class="week-sta"></div> -->
                    </div>
                </div>
                <!-- 右侧图 -->
                <div class="right">
                     <!-- 右1 -->
                    <div>
                        <a-button class="button-screen" ><span class="button-font">资源统计</span></a-button>
                    </div>
                    <div class="image-graph" id="right-1-div" style="height:240px !important">
                        <PRE>&emsp;泊位总数:&emsp;{{totalTruck}}</PRE>
                        <PRE>&emsp;停车次数(当天):&emsp;{{parkingTimes}}</PRE>
                        <div id="right-1">
                        </div>
                    </div>
                     <!-- 右2 -->
                    <div>
                        <a-button class="button-screen" ><span class="button-font">泊位时段使用统计</span></a-button>
                    </div>
                    <div id="right-2" class="image-graph" style="height:200px !important"></div>
                     <!-- 右3 -->
                    <div>
                        <a-button class="button-screen" ><span class="button-font">今日用户统计</span></a-button>
                    </div>
                    <div id="right-3" class="image-graph" style="height:190px !important"></div>
                </div>
            </div>
        </div>
    <!-- </a-config-provider> -->
</template>
<script>
    import screenApi from '../api/ScreenApi';
    import screenfull from 'screenfull';
    // import {mapActions} from 'vuex'
    import echart from "../utils/EChart.js";
    import echartsMap from "../utils/EchartsMap.js";
    import echartsMap_sm from "../utils/EchartsMap_sm.js"
    import {APIBaseURL} from "../api/BaseApi";
    // import Viewer from 'cesium';
    import {titles} from "../api/BaseApi";
    export default {
        name: 'Scren',
        data() {
            return {
                viewHeight: {height: ''},
                // zh_CN,
                titles,
                date:new Date(),
                // all:'0/0',
                // day:'0/0',
                // yesterday:'0/0',
                all:'0',
                day:'0',
                yesterday:'0',
                totalTruck:0,
                parkingTimes:0,
                weekOrder:[
                    {"days":this.getTime(0),"count":0},
                    {"days":this.getTime(1),"count":0},
                    {"days":this.getTime(2),"count":0},
                    {"days":this.getTime(3),"count":0},
                    {"days":this.getTime(4),"count":0},
                    {"days":this.getTime(5),"count":0},
                    {"days":this.getTime(6),"count":0}
                    ],
                // fullscreen: true,
            }
        },
        mounted: function () {  // 页面加载时隐藏头部
            var _this = this; //声明一个变量指向vue实例this,保证作用域一致
            _this.$store.dispatch('hiddenHead')

            //动态获取高度
            _this.getHeight();

            this.timer = setInterval(function() {
                _this.date = new Date();//修改数据date
            }, 1000);

            _this.drownGap();
            this.timerView = setInterval(function() {
                _this.drownGap();
            }, 120000);

        },
        destroyed: function () {  // 页面销毁时隐藏头部
            this.$store.dispatch('showHead');
            if(this.timer) {
                clearInterval(this.timer);//在vue实例销毁钱，清除我们的定时器
            }
            if(this.timerView) {
                clearInterval(this.timerView);//在vue实例销毁钱，清除我们的定时器
            }
        },

        methods: {
            // ...mapActions(['setUserName']),

            getHeight() {
                // if(this.fullscreen==undefined){
                    // this.viewHeight.height = document.documentElement.clientHeight;
                // }else{
                    this.viewHeight.height =  window.innerHeight+111+'px';

            },
            drownGap(){
                //泊位统计
                screenApi.getTruckStatus().then(res=>{
                    echart.truckUser("truck",res.data);
                }).catch(err=>{
                    console.log(err)
                })
                //支付方式统计
                screenApi.payType().then(res=>{
                    echart.rangChart("pay",res.data);
                }).catch(err=>{
                    console.log(err)
                })
                //设备在线统计
                screenApi.online().then(res=>{
                   echart.pieChart("online",res.data,1);
                }).catch(err=>{
                    console.log(err)
                })
                 //收入统计
                 screenApi.moneyOrder().then(res=>{
                     this.all=res.data.allNum;
                     this.day=res.data.dayNum;
                     this.yesterday=res.data.yesterdayNum;
                    //  let allD=res.data.all;
                    //  let dayD=res.data.day;
                    //  let yesterdayD=res.data.yesterday;
                    //  this.all = allD.substring(allD.lastIndexOf("/")+1);
                    // this.day = dayD.substring(dayD.lastIndexOf("/")+1);
                    // this.yesterday = yesterdayD.substring(yesterdayD.lastIndexOf("/")+1);
                 }).catch(err=>{
                     console.log(err)
                 })
                 //7天内订单统计
                //  screenApi.weekOrder().then(res=>{
                //      var data = res.data;
                //      echart.weekOrder("all",data.all,"全部车场(单位:元)");
                //      echart.weekOrder("in",data.in,"路内车场(单位:元)");
                //      echart.weekOrder("out",data.out,"路边车场(单位:元)");
                //  }).catch(err=>{
                //       console.log(err)
                //  })
                 //资源统计
                 screenApi.truckStatistics().then(res=>{
                    this.totalTruck=res.data.sum;
                    this.parkingTimes=res.data.times;
                    echart.truckTimes("right-1",res,1);
                 }).catch(err=>{
                    console.log(err)
                 })
                 //工单统计
                //  screenApi.appeal().then(res=>{
                //     echart.pieChart("right-2",res.data,2);
                //  }).catch(err=>{
                //       console.log(err)
                //  })
                //时间段泊位使用统计
                screenApi.truckUseByTime().then(res=>{
                    // echart.areaSChart("right-2",res.data);
                    echart.KChart("right-2",res.data);
                 }).catch(err=>{
                    console.log(err)
                 })
                 //用户统计
                 screenApi.user().then(res=>{
                    echart.truckTimes("right-3",res,2);
                 }).catch(err=>{
                     console.log(err)
                 })
                 //停车时长统计
                 screenApi.paringTime().then(res=>{
                      echart.areaChart("time",res.data);
                 }).catch(err=>{
                     console.log(err)
                 })
                 //地图展示
                if(APIBaseURL==="http://muse.cheboyi.com/lt"){
                    screenApi.truckMap().then(res=>{
                        echartsMap_sm.map("Crowded",res.data);
                    }).catch(err=>{
                        console.log(err)
                    })
                }
                if(APIBaseURL!=="http://muse.cheboyi.com/lt"){
                 screenApi.truckMap().then(res=>{
                     echartsMap.map("Crowded",res.data);
                     console.log("11111")
                 }).catch(err=>{
                      console.log(err)
                 })}
                 //近7日订单数量统计
                screenApi.weekOrderNum().then(res=>{
                    console.log(res.data)
                    this.weekOrder = res.data;
                 }).catch(err=>{
                      console.log(err)
                 })

            },
             //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
            dateFormat(time) {
                var date=new Date(time);
                var year=date.getFullYear();
                /* 在日期格式中，月份是从0开始的，因此要加0
                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                 * */
                var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
                var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
                var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
                var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
                var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
                //星期
                var week = "星期" + "日一二三四五六".charAt(date.getDay());

                // 拼接
                return hours+":"+minutes+":"+seconds +" " +year+"-"+month+"-"+day +' '+week;
            },
            getTime(obj) {
                var date=new Date();
                var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
                var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
                // 拼接
                console.log(month+"月"+(day-obj)+"日")
                return month+"月"+(day-obj)+"日" ;
            },
            toMain(){
                this.$store.dispatch('loadPermission');
                this.$router.push('/main');
                this.fullScreens();
            },
            fullScreens() {
                // this.fullscreen=true;
                if (!screenfull.isEnabled) {
                    this.$message({
                    message: 'you browser can not work',
                    type: 'warning'
                    })
                    return false
                }
                let ele=document.getElementById("mainAllS");
                screenfull.toggle(ele)
                this.fullscreen=true
            },

        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mainAll{
    width: 100%;
    height: 100%;
    background: url('../images/screen.png');

}
.body-graph{
    width:100%;
    margin-top: 5em;
    /* height: 60%; */
    /* height: calc(100vh - 100px); */
}
.header{
    width:100%; justify-content:space-between;
  }
.header-div{
    margin-top: 3.3em;
 }
.header-font{
    font-size:36px; font-weight: bolder; color:#fff;
}
.one{
    margin-left: 1.7em; text-align:left; width: 30%;
    margin-top: 5em;
}
.two{
    width:40%; text-align: center;
}
.three{
    width:30%; text-align: right; margin-right: 1.7em;
    margin-top: 5em;
}
.header-time{
    font-size: 28px; color:#fff;
}
.left{
    width: 20%;
    height: 100%;
    float: left;
    margin-left: 1%;
}
.center{
    width: 56%;
    height: 100%;
    float: left;
    margin-left:1%;
}
.right{
    width: 20%;
    height: 100%;
    float: left;
    margin-left: 1%;
}
#Crowded{
    /* 非F11屏 */
/* height:430px !important; */
    /* F11屏 */
height:490px !important;
border:none;
}
.button-screen{
    background: url("../images/Screen-button.png");
    text-align: center;
    height: 64px;
    width: 158px;
    color: snow;
    background-repeat:no-repeat;
    border: none;
    text-align: left;
    padding-left: 0;
    /* 电脑屏 */
    /* margin-top: 0.4em; */
    /* f11大屏 */
    margin-top: 2.5em;
}
.button-font{
font-size:18px;display:inline-block;margin-top: 1.1em;
}
.money-tab{
    width: 30%;
    margin-left: 2.5%;
    height: 100%;
    float: left;
    text-align: center;
    color: #fff;
    display:flex;
    justify-content:center;align-items:center;flex-direction:column;

}
pre{
    font-size: 18px;
    color: #fff;
    margin-bottom: 0em !important;
}
.tab-pre{
    color:#28c5b6;
    font-size: 22px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.week-sta{
    float: left;
    width: 30%;
    margin-left: 2.5%;
    height: 100%;
}
#right-1{
    width: 100%;
    height: 70%;
    /* height:calc(100vh - 10%); */
}
.image-graph{
    width: 100%;
    height: 120px;
    margin-top: 2px;
}
#truck,#pay,#online{
  background: url("../images/120.gif") ;
  background-size:100% 100%;
/* background-attachment:fixed; */
}
#time{
  background: url("../images/169.gif") ;
  background-size:100% 100%;
}
#right-2,#right-3{
  background: url("../images/199.gif") ;
  background-size:100% 100%;
}
#right-1-div{
  background: url("../images/241.gif") ;
  background-size:100% 100%;
}
#week-day,#money{
   background: url("../images/1066.gif") ;
  background-size:100% 100%;
}

.canter-day{
    /* background: url("../images/A1.png"); */
    height: 80%;
    margin-top: 0.8em;
    margin-left: 0.75em;
    width: 13%;
    float: left;
    text-align: center;
    font-size: 16px;
}
.day-div{
    height: 80%;
    width: 100%;
    /* text-align: center; */
    display:flex;
    justify-content:center;align-items:center;flex-direction:column;
    background: url("../images/A1.png") no-repeat;
}
</style>
